<template>

    <div id="dashboard">

        <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>

        <!--<router-view></router-view>-->
        <van-tabbar route active-color="#121C32" inactive-color="#BFC3CD">
            <van-tabbar-item replace to="/dashboard/home">
                <span>首页</span>
                <img style="height: 21px;width: 21px" slot="icon" slot-scope="props" :src="props.active ? home_icon.active : home_icon.normal">
            </van-tabbar-item>
            <van-tabbar-item replace to="/dashboard/order" v-show="!isMaster">
                <span>订单</span>
                <img style="height: 21px;width: 21px" slot="icon" slot-scope="props" :src="props.active ? order_icon.active : order_icon.normal">
            </van-tabbar-item>

            <van-tabbar-item replace to="/dashboard/masterOrder" v-show="isMaster">
                <span>订单</span>
                <img style="height: 21px;width: 21px" slot="icon" slot-scope="props" :src="props.active ? order_icon.active : order_icon.normal">
            </van-tabbar-item>

            <van-tabbar-item replace to="/dashboard/mine">
                <span>我的</span>
                <img style="height: 21px;width: 21px" slot="icon" slot-scope="props" :src="props.active ? mine_icon.active : mine_icon.normal">
            </van-tabbar-item>
        </van-tabbar>

    </div>

</template>

<script>
    import {mapState, mapMutations, mapActions} from 'vuex'
    import {getStore} from '@/config/global'

    export default {
        name: "DashBoard",
        data(){
            return {
                home_icon: {
                    normal: require('@/images/tabbar/home_default.png'),
                    active: require('@/images/tabbar/home_selected.png')
                },
                order_icon: {
                    normal: require('@/images/tabbar/order_default.png'),
                    active: require('@/images/tabbar/order_selected.png')
                },
                mine_icon: {
                    normal: require('@/images/tabbar/mine_default.png'),
                    active: require('@/images/tabbar/mine_selected.png')
                },
            }
        },

        mounted(){
            this.reqUserInfo();

            // this.syncUserInfo(result.data);

        },
        computed:{
            ...mapState(['userInfo']),
            isMaster(){
                if (this.userInfo && (this.userInfo.role === 'HEADMAN' || this.userInfo.role === 'MASTER')){
                    return true;
                }
                return false;
            },

        },
        methods:{
            ...mapActions(['reqUserInfo']),
            test(){
                // this.userInfo;
            }
    }

    }
</script>

<style lang="less" scoped>
    #dashboard{
        width: 100%;
        height: 100%;
        background-color: #f6f8fb;
    }

     .van-tabbar-item__icon img{
        /*height: 1.8666666666666667rem;*/
         height: 28px;

     }

</style>